<template>
  <div class="descBox">
    <div class="title" v-if="modTitle != ''">
      <div class="colorarea"></div>
      {{modTitle}}
    </div>
    <el-row :gutter="24">
      <el-col :span="item.col" v-for="(item, index) in descList" :key="index">
        <p class="topdesc">{{ item.name }}</p>
        <p class="bottomdesc" :style="{color:item.color?item.color:''}">{{ item.value }}</p>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { computed, nextTick, reactive, watchEffect } from "vue";
import axios from "@/utils/request";
import * as echarts from "echarts";
import dayjs from "dayjs";
import { searchchannelNoList } from "@/api/config";
import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const props = defineProps({
  descList: {
    type: Array,
    default: () => {
      return [
        {
          name: "编号",
          value: "012D01",
          col: 4,
        },
        {
          name: "名称",
          value: "开关",
          col: 4,
        },
        {
          name: "安装地点",
          value: "05采煤工作面回风巷105米处",
          col: 16,
        },
      ];
    },
  },
  modTitle:{
    type: String,
    default:''
  }
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.el-col{
  margin-bottom: 16px;
}
.descBox {
  border-radius: 4px;
  background: rgba(91, 109, 128, 0.04);
  padding: 12px 16px 0;
  p {
    padding: 0;
    margin: 0px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }
  .topdesc {
    color: rgba(62, 70, 79, 0.6);
  }
  .bottomdesc {
    color: rgba(62, 70, 79, 1);
    margin-bottom: 0 !important;
  }
}
.title {
  height: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #3e464f;
  .colorarea {
    margin-right: 6px;
    width: 4px;
    height: 14px;
    background-color: #409eff;
  }
}
</style>
